<template>
  <div class="vr-container">
    <template v-if="flag">
      <div class="vr-top">
        <div class="vr-search">
          <el-input
            placeholder="请输入你要搜索的场馆名称"
            v-model="queryParams.key"
            @keyup.native.enter="search"
            size="small"
            @clear="search"
            clearable
          ></el-input>
        </div>
        <div class="vr-btn"><el-button type="primary" size="small" @click="isShowDialog = true">新增</el-button></div>
      </div>

      <el-scrollbar style="height: calc(100vh - 190px)" class="scrollbar" id="scroll-bar">
        <el-table :data="list">
          <el-table-column type="expand">
            <template slot-scope="props">
              <div v-for="item in props.row.list" :key="item.data_id">
                <el-divider content-position="left">{{ item.id }}</el-divider>
                <span v-for="(items, index) in item.list" :key="item.data_id + '' + index">
                  <el-image
                    v-if="items.type === 'CanvasConfigurator'"
                    style="width: 100px; height: 60px; margin-right: 10px"
                    fil="cover"
                    :title="items.name"
                    :src="items.url"
                    :preview-src-list="[items.url]"
                  ></el-image>
                </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="id" prop="data_id"></el-table-column>
          <el-table-column label="场馆名" prop="name"></el-table-column>
          <el-table-column label="场馆介绍" prop="comment"></el-table-column>
          <el-table-column label="封面图">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.title_page"
                style="width: 100px; height: 40px"
                :src="scope.row.title_page"
                :preview-src-list="[scope.row.title_page]"
                fit="cover"
              ></el-image>
              <span v-else>暂无图片</span>
            </template>
          </el-table-column>

          <el-table-column label="最后修改时间" width="160" prop="data_update_time"></el-table-column>
          <!-- <el-table-column label="是否推荐" prop="association_job">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.recommend"
                @change="onRecommend(scope.row)"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="380">
            <template slot-scope="scope">
              <el-upload
                action=""
                class="avatar-uploader"
                style="width: 100px; float: left"
                :show-file-list="false"
                :before-upload="
                  (file) => {
                    beforeAvatarUpload(file, scope.row.data_id);
                  }
                "
              >
                <el-button size="mini">上传封面图</el-button>
              </el-upload>
              <el-button type="primary" @click="goShowRoom(scope.row.data_id, scope.row)" size="mini">调试</el-button>
              <el-button type="primary" @click="goVrscene(scope.row.data_id)" size="mini">详情</el-button>
              <el-button type="primary" @click="updVrstadiums(scope.row.data_id, scope.row)" size="mini">
                修改
              </el-button>
              <el-button type="danger" @click="delVrstadiums(scope.row.data_id)" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>

      <paging ref="page" :func="getList"></paging>

      <el-dialog @closed="onClose" title="提示" :visible.sync="isShowDialog">
        <el-form :model="params" :rules="rules" ref="dataParams" label-width="80px" class="demo-dataParams">
          <el-form-item label="场馆名" prop="name">
            <el-input v-model="params.name"></el-input>
          </el-form-item>

          <el-form-item label="描述" prop="comment">
            <el-input type="textarea" v-model="params.comment"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowDialog = false">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </template>
    <template v-else>
      <div>
        <div class="vr-top">
          <div class="vr-search">
            <div class="detail-back" @click="flag = true">
              <i class="el-icon-back"></i>
              返回
            </div>
          </div>
          <div class="vr-btn">
            <el-button type="primary" size="small" @click="isShowDDialog = true">新增</el-button>
          </div>
        </div>
        <el-scrollbar style="height: calc(100vh - 190px)" class="scrollbar" id="scroll-bar">
          <el-table :data="dList">
            <el-table-column label="id" prop="data_id"></el-table-column>
            <el-table-column label="封面图">
              <template slot-scope="scope">
                <el-image
                  v-if="scope.row.image_url"
                  style="width: 100px; height: 40px"
                  :src="scope.row.image_url"
                  :preview-src-list="[scope.row.image_url]"
                  fit="cover"
                ></el-image>
                <span v-else>暂无图片</span>
              </template>
            </el-table-column>
            <el-table-column label="场景名" prop="scene_name"></el-table-column>
            <el-table-column label="场景介绍" prop="scene_detail"></el-table-column>
            <el-table-column label="操作" width="480">
              <template slot-scope="scope">
                <el-upload
                  action=""
                  class="avatar-uploader"
                  style="width: 100px; float: left"
                  :show-file-list="false"
                  :before-upload="
                    (file) => {
                      beforeScenarioUpload(file, scope.row.data_id);
                    }
                  "
                >
                  <el-button size="mini">上传场景图</el-button>
                </el-upload>

                <el-button type="primary" @click="updVrscene(scope.row.data_id, scope.row)" size="mini">修改</el-button>
                <el-button type="danger" @click="delVrscene(scope.row.data_id)" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>

        <el-dialog @closed="onClose" title="提示" :visible.sync="isShowDDialog">
          <el-form :model="dparams" :rules="drules" ref="ddataParams" label-width="80px" class="demo-dataParams">
            <el-form-item label="场景名" prop="scene_name">
              <el-input v-model="dparams.scene_name"></el-input>
            </el-form-item>

            <el-form-item label="场景描述" prop="scene_detail">
              <el-input type="textarea" v-model="dparams.scene_detail"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="isShowDDialog = false">取 消</el-button>
            <el-button type="primary" @click="ddialogConfirm">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
  </div>
</template>

<script>
  import paging from '@/components/paging';
  import vrstadiumsManage from '@/api/vrstadiums';
  import { getImageUrl } from '@/utils/image';
  import { qiniuUploadFile } from '@/utils/QiniuUpload';
  export default {
    name: 'vr-view',
    components: {
      paging,
    },
    data() {
      return {
        flag: true,
        list: [],
        dList: [],
        queryParams: {
          key: '',
        },
        params: {
          name: '',
          comment: '',
          content: '{}',
        },
        dparams: {
          stadium_id: '',
          scene_name: '',
          scene_detail: '',
        },
        isShowDialog: false,
        isShowDDialog: false,
        updId: '',
        dupdId: '',
        rules: {
          name: [{ required: true, message: '请输入场馆名', trigger: 'blur' }],
        },
        drules: {
          scene_name: [{ required: true, message: '请输入场景名', trigger: 'blur' }],
        },
      };
    },
    async mounted() {
      this.refresh();
    },
    methods: {
      getImageUrl,
      refresh() {
        this.$refs.page.refresh();
      },
      search() {
        this.$refs.page.search();
      },
      getList(callback) {
        vrstadiumsManage.getVrstadiums(this.queryParams).then((res) => {
          let total = res.total_count;
          this.list =
            res.item_list.map((item) => {
              return { ...item, list: item.content !== '{}' ? JSON.parse(JSON.parse(item.content).arr) : [] };
            }) || [];

          console.log(this.list);
          callback(this.list, total);
        });
      },
      async beforeAvatarUpload(file, id) {
        let res = await qiniuUploadFile(file, 'vrstadiums');
        if (res) {
          await vrstadiumsManage.updVrstadiums(id, { title_page: res.key });
          this.refresh();
        }

        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // await vrstadiumsManage.setVrstadiumsImage(id, formData);
        // this.refresh();
      },
      async beforeScenarioUpload(file, id) {
        const formData = new FormData();
        formData.append('上传的key值', file);
        await vrstadiumsManage.setVrimages(id, formData);
        this.goVrscene(this.dparams.stadium_id);
      },
      goShowRoom(id) {
        this.$router.push({ path: '/showRoom', query: { data_id: id, type: 'VR' } });
      },
      async goVrscene(id) {
        this.flag = false;
        this.dparams.stadium_id = id;
        let res = await vrstadiumsManage.getVrscene({ stadium_id: id });
        this.dList = res.item_list || [];
      },
      updVrstadiums(data_id, row) {
        this.params = row;
        this.updId = data_id;
        this.isShowDialog = true;
      },
      updVrscene(data_id, row) {
        this.dparams = row;
        this.dupdId = data_id;
        this.isShowDDialog = true;
      },
      async delVrstadiums(data_id) {
        this.$alert('是否确定删除该展厅', '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              await vrstadiumsManage.delVrstadiums(data_id);
              this.refresh();
            }
          },
        });
      },
      async delVrscene(data_id) {
        this.$alert('是否确定删除该场景', '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              await vrstadiumsManage.delVrscene(data_id);
              this.goVrscene(this.dparams.stadium_id);
            }
          },
        });
      },
      ddialogConfirm() {
        this.$refs.ddataParams.validate(async (valid) => {
          if (valid) {
            let res = null;
            if (this.dupdId) {
              res = await vrstadiumsManage.updVrscene(this.dupdId, {
                ...this.dparams,
              });
            } else {
              res = await vrstadiumsManage.setVrscene({
                ...this.dparams,
              });
            }
            if (res) {
              this.isShowDDialog = false;
              this.goVrscene(this.dparams.stadium_id);
            }
          }
        });
      },
      dialogConfirm() {
        this.$refs.dataParams.validate(async (valid) => {
          if (valid) {
            let res = null;
            let params = {
              ...this.params,
            };
            if (this.updId) {
              res = await vrstadiumsManage.updVrstadiums(this.updId, params);
            } else {
              res = await vrstadiumsManage.setVrstadiums(params);
            }
            if (res) {
              this.isShowDialog = false;
              this.refresh();
            }
          }
        });
      },
      onClose() {
        this.updId = '';
        this.params = {
          name: '',
          comment: '',
          content: '{}',
        };
        this.dupdId = '';
        this.dparams = {
          stadium_id: '',
          scene_name: '',
          scene_detail: '',
        };
      },
    },
  };
</script>

<style lang="less" scoped>
  .vr-container {
    height: 100%;
    .vr-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .vr-search {
        display: flex;
        .search-select {
          margin-left: 12px;
        }
      }
    }
    .detail-back {
      cursor: pointer;
    }
  }
</style>
